<template>
  <div>
    <PageHead title="测评报告" :showDeviceStatus="false"/>
    <div class="content">
      <el-row :gutter="24" :style="rowStyle" style="background: #212334;">
        <el-col :span="4">任务编号</el-col>
        <el-col :span="5">任务序列号</el-col>
        <el-col :span="2">性别</el-col>
        <el-col :span="2">年龄</el-col>
        <el-col :span="4">手机号</el-col>
        <el-col :span="5">测评时间</el-col>
        <el-col :span="2">操作</el-col>

      </el-row>
      <el-row :gutter="24" :style="rowStyle" v-for="item in tableData" style="background: #11142C; margin: 1px 0">
        <el-col :span="4">{{item.id}}</el-col>
        <el-col :span="5">{{ item.taskIndex }}</el-col>
        <el-col :span="2">{{item.sex}}</el-col>
        <el-col :span="2">{{item.age}}</el-col>
        <el-col :span="4">{{item.phone}}</el-col>
        <el-col :span="5">{{item.time}}</el-col>
        <el-col :span="2">
          <div v-if="item.status === 'createing'" class="btn1">报告生成中</div>
          <div v-else class="btn2">查看报告</div>
        </el-col>
      </el-row>
      <div style="margin-top: 12px; display: flex; justify-content: flex-end;">
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 30, 40]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="50"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import PageHead from "@/components/PageHead.vue";
import {ref} from "vue";

const currentPage = ref(1)
const pageSize = ref(10)
const handleSizeChange = val => {

}
const handleCurrentChange = val => {

}

const tableData = [
  {id: '000069', taskIndex: '多模态任务组合1', sex: '男', age: 30, phone: '132****8235', time: '2025-01-09 09:09:09', status: 'createing'},
  {id: '000069', taskIndex: '多模态任务组合1', sex: '男', age: 30, phone: '132****8235', time: '2025-01-09 09:09:09', status: 'success'},
  {id: '000069', taskIndex: '多模态任务组合1', sex: '男', age: 30, phone: '132****8235', time: '2025-01-09 09:09:09', status: 'success'},
  {id: '000069', taskIndex: '多模态任务组合1', sex: '男', age: 30, phone: '132****8235', time: '2025-01-09 09:09:09', status: 'success'},
  {id: '000069', taskIndex: '多模态任务组合1', sex: '男', age: 30, phone: '132****8235', time: '2025-01-09 09:09:09', status: 'success'},
  {id: '000069', taskIndex: '多模态任务组合1', sex: '男', age: 30, phone: '132****8235', time: '2025-01-09 09:09:09', status: 'success'},
  {id: '000069', taskIndex: '多模态任务组合1', sex: '男', age: 30, phone: '132****8235', time: '2025-01-09 09:09:09', status: 'success'},
  {id: '000069', taskIndex: '多模态任务组合1', sex: '男', age: 30, phone: '132****8235', time: '2025-01-09 09:09:09', status: 'success'},
  {id: '000069', taskIndex: '多模态任务组合1', sex: '男', age: 30, phone: '132****8235', time: '2025-01-09 09:09:09', status: 'success'},
  {id: '000069', taskIndex: '多模态任务组合1', sex: '男', age: 30, phone: '132****8235', time: '2025-01-09 09:09:09', status: 'success'}
]

const rowStyle = {
  height: '46px',
  alignItems: 'center',
  width: '100%',
  margin: '0'
}
</script>
<style scoped lang="scss">
.content{
  margin-top: 20px;
}

.btn1{
  color: #666666;
  font-size: 14px;
  cursor: pointer;
}
.btn2{
  cursor: pointer;
  font-size: 14px;
  color: #0D8CFF;
}
</style>

<style lang="scss">

.el-pagination__total,.el-pagination__goto, .el-pagination__classifier{
  color: #DCDCDC !important;
}
.el-pager > .number{
  margin-right: 4px !important;
}
.btn-prev{
  margin-right: 4px !important;
}

</style>